<template>
	<!-- 产品详情 -->
	<view class="p-2 bg-white h_100">
		<!-- 小程序引流关注公众号 -->
		<official></official>
		<!-- 轮播 -->
		<view class="swiper_box rounded_15">
			<image :src="info.product_img" mode="aspectFit" v-if="status != 1"></image>
			<u-swiper v-else :list="info.img_list" @change="e => (currentNum = e.current)" autoplay :circular="true" height="223" indicatorStyle="right: 20px" imgMode="aspectFill">
				<view slot="indicator" class="indicator-num" v-if="info.img_list && info.img_list.length >= 1">
					<text class="indicator-num__text text-white font_24">{{ currentNum + 1 }}/{{ info.img_list.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="mb-3">
			<view class="h4 font-weight-bold pt-2">{{ info.product_name }}</view>
			<view class="c_9 font_24 py" v-if="info.release_time">发布时间：{{ info.release_time }}</view>
			<view class="flex justify-between align-center mt-1">
				<view class="left_icon flex">
					<view @click="goodChange(info.is_like)">
						<image v-if="info.is_like == 1" src="/static/img2/nav1/fabulous1.png" mode=""></image>
						<image v-else src="/static/img2/nav1/praise_red.png" mode=""></image>
					</view>
					<view class="ml-2" @click="collectionChange(info.is_collection)">
						<image v-if="info.is_collection == 1" src="/static/img2/nav1/collection1.png" mode=""></image>
						<image v-else src="/static/img2/nav1/collect_red.png" mode=""></image>
					</view>
					<view class="ml-3" @click="ewmChange" v-if="info.is_code == 1">
						<image src="@/static/img2/home/p_ewm.png" mode="scaleToFill" style="width: 47rpx;height: 47rpx;margin-top:5rpx"></image>
					</view>
				</view>
				<view>
					<!-- status 0参数 1图文 -->
					<button v-if="status != 1" class="h6 text-white enquiry" @click="toAskprice(info.inquiry_status, './ask_price?id=' + info.id)">询价</button>
					<button v-else class="h6 text-white enquiry" @click="toAskprice(info.inquiry_status, './ask_price?id=' + info.id + '&type=2')">询价</button>
				</view>
			</view>
		</view>
		<!-- 公司 -->
		<button class="login_btn" @getphonenumber="authLogin" :open-type="opentype()">
			<view class="element py-3 flex justify-between align-center" @click="toCompany">
				<image v-if="!info.company_logo" class="ele_img" src="/static/img2/home/empty_logo.jpg" mode="aspectFit"></image>
				<image v-else class="ele_img" :src="info.company_logo" mode="aspectFit"></image>
				<view class="ele_cont">
					<view class="tit_box flex">
						<text class="h6 lh_42 tit text-left" style="min-height: 100rpx;">{{ info.company_name }}</text>
						<view class="tag c_9" v-if="info.form_sign_name">{{ info.form_sign_name }}</view>
					</view>
					<view class="s_img flex flex-wrap">
						<view class="samll_img" v-for="(imgItem, imgIdx) of info.recommend_img" :key="imgIdx"><image :src="imgItem" mode="aspectFit"></image></view>
					</view>
				</view>
			</view>
		</button>
		<!-- 推荐产品 -->
		<!-- <view class="recommend mt-3">
			<scroll-view scroll-x="true" show-scrollbar="false" class="scroll_cont">
				<view class="recommend_item" v-for="(serItem, serIdx) of info.series" :key="serIdx">
					<image style="border-radius: 0;" :src="serItem.product_img" mode="aspectFill"></image>
					<view class="font-small py text_hidden1 text-center">{{ serItem.business_company }}</view>
					<button class="rec_btn font_22 text-center text-white" @click="goPages('./ask_price?id=' + serItem.id)">询价</button>
				</view>
			</scroll-view>
		</view> -->
		<!-- 参数型详情展示 -->
		<view class="mt-3" v-if="status != 1">
			<param-list
				:priduct-mid="info.mid"
				:priduct-id="info.id"
				:product-model="info.product_model"
				:model-product="info.model_product"
				:product-list="info.product_details"
				@detailChange="detailChange"
			></param-list>
		</view>
		<!-- 图文型详情展示 -->
		<view class="py-3 view" style="padding-bottom: 121rpx;">
			<u-parse class="view" :content="info.product_introduce || info.content | formatRichText"></u-parse>
			<!-- <rich-text class="view" :nodes="info.product_introduce || info.content | formatRichText" selectable></rich-text> -->
		</view>
		<view class="bottom_btn flex align-center">
			<view class="text-white text flex align-center justify-center" @tap="downLoad">
				<u-icon name="download" color="#fff" size="28"></u-icon>
				<text>资料下载</text>
			</view>
			<text class="text-white line">|</text>
			<view class="text-white text flex justify-center">
				<button class="bg_main text-white text flex align-center justify-center" open-type="share">
					<image class="ewr_img mr-1" src="@/static/img2/home/share.png" mode="" style="width: 40rpx;height: 40rpx;border: 0;"></image>
					<text>产品分享</text>
				</button>
			</view>
		</view>
		<u-popup :show="ewmShow" @close="ewmShow = false" mode="center" :closeOnClickOverlay="true">
			<view class="py-3 px-5 m-auto text-center">
				<view class="font-weight-bold h5" style="max-width: 500rpx;">{{ info.product_name }}</view>
				<view class="p-3 flex justify-center"><image v-if="ewmImg" class="bigewm" :src="ewmImg" mode="" :show-menu-by-longpress="true"></image></view>
				<button type="primary" size="small" class="savebtn bg_main font-small" @click="savePosterTap">保存至相册</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getProductDetail, getImgtextProductDetail } from '@/api/home/nav/product_data.js';
import { likecollectionDzsc, orcodeCode } from '@/api/home/company.js';
import paramList from './component/param_list.vue';
import download from '@/common/js/download.js';
import util from '@/common/js/util.js';
export default {
	components: {
		paramList
	},
	data() {
		return {
			productId: '', //产品id
			info: {
				recommend_img: []
			},
			currentNum: 0,
			status: '', //类型 0参数 1图文
			ewmShow: false,
			ewmImg: '',
			exhibitionId: '',
			code: ''
		};
	},
	computed: {
		opentype() {
			return function(val) {
				return !uni.getStorageSync('userInfo').hasLogin ? 'getPhoneNumber' : '';
			};
		}
	},
	filters: {
		formatRichText(html) {
			return util.formatRichText(html);
		}
	},
	onLoad(option) {
		// console.log('详情', option);
		this.exhibitionId = option.exhibitionId || '';
		this.productId = option.id;
		this.status = option.status;
		this.code = option.code; //收集进入详情入口（展会/扫码）
		this.getInfo(option.id);
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	//分享到聊天
	onShareAppMessage(res) {
		return {
			title: this.info.product_name,
			path: '/subPages/home/product_data/detail?id=' + this.productId + '&status=' + this.status + '&exhibitionId=' + this.exhibitionId, //界面路径
			imageUrl: this.info.product_img || this.info.img_list[0]
		};
	},
	//分享到朋友圈
	onShareTimeline() {
		return {
			title: this.info.product_name,
			path: '/subPages/home/product_data/detail?id=' + this.productId + '&status=' + this.status + '&exhibitionId=' + this.exhibitionId, //界面路径
			imageUrl: this.info.product_img || this.info.img_list[0]
			// query: ''
		};
	},
	methods: {
		getInfo(val) {
			let msg = {
				id: val,
				zhanhui_id: this.exhibitionId || '',
				code: this.code || 0
			};
			if (this.status == 1) {
				// 图文型
				getImgtextProductDetail(msg)
					.then(res => {
						// console.log('图文', res);
						if (res.code == 0) {
							this.info = res.data;
						} else {
							uni.$u.toast(res.msg);
						}
					})
					.catch(err => {
						console.log('获取产品详情失败', err);
					});
			} else {
				// 参数型
				getProductDetail(msg)
					.then(res => {
						// console.log(res);
						if (res.code == 0) {
							this.info = res.data;
						} else {
							uni.$u.toast(res.msg);
						}
					})
					.catch(err => {
						console.log('获取产品详情失败', err);
					});
			}
		},
		// 点赞
		// goodAndCollectionChange(type, val) {
		// 	let dzscType = type == 'like' ? 4 : 3;
		// 	let state = val == 0 ? 1 : 2; //  0 未点赞 1 已点赞
		// 	this.dzscChange(dzscType, state);
		// },
		// 点赞
		goodChange(val) {
			uni.$u.toast('点赞');
			let isSc = val == 0 ? 1 : 2;
			this.dzscChange(4, isSc);
		},
		// 收藏
		collectionChange(val) {
			uni.$u.toast('收藏');
			let isDz = val == 0 ? 1 : 2;
			this.dzscChange(3, isDz);
		},
		dzscChange(type, status) {
			if (!uni.getStorageSync('userInfo').hasLogin) {
				this.toLogin(); // 未登录
			} else {
				let msg = {
					checktype: 2, //执行收藏点赞企业操作
					type: type, //1 收藏企业  2  点赞企业  3 收藏产品  4 点赞产品
					status: status, // 1 收藏以及点赞企业、产品  2 取消收藏以及点赞 企业、产品
					company_product_id: this.productId, // 传递对应企业以及产品id
					uid: uni.getStorageSync('userInfo').userId, //用户id
					c_status: this.status // 0参数型，1图文型  (只有产品传)
				};
				likecollectionDzsc(msg)
					.then(res => {
						if (res.code == 0) {
							uni.$u.toast(res.msg);
							if (type == 3) {
								// 处理收藏产品后的操作
								this.info.is_collection = this.info.is_collection == 0 ? 1 : 0;
							} else {
								// 处理点赞产品后的操作
								this.info.is_like = this.info.is_like == 0 ? 1 : 0;
							}
						} else {
							uni.$u.toast(res.msg);
						}
					})
					.catch(err => {
						console.log('点赞或收藏失败', err);
						uni.$u.toast('操作失败');
					});
			}
		},
		// 切换产品
		detailChange(val) {
			this.getInfo(val);
		},
		// 去询价
		toAskprice(val, router) {
			console.log(val);
			if (val == 1) {
				uni.$u.toast('一天最多询价3次，请明天再来哦！');
			} else {
				this.goPages(router);
			}
		},
		// 获取二维码
		ewmChange() {
			if (!uni.getStorageSync('userInfo').hasLogin) {
				this.toLogin(); // 未登录
				return;
			}
			this.ewmImg = '';
			let msg = {
				type: 2,
				id: this.productId,
				status: this.status
			};
			orcodeCode(msg).then(res => {
				// console.log(res);
				if (res.code == 0) {
					this.ewmShow = true;
					this.ewmImg = res.img;
				} else {
					uni.$u.toast('二维码生成失败');
				}
			});
		},
		// 保存图片到相册
		savePosterTap() {
			download.saveImage(this.ewmImg);
			setTimeout(() => {
				this.ewmShow = false;
				this.ewmImg = '';
			}, 1000);
		},
		// 下载资料
		downLoad() {
			// console.log('下载资料', this.info);
			if (!uni.getStorageSync('userInfo').hasLogin) {
				// 未登录 登录后再跳回当前页面
				let msg = {
					title: 'productDetail',
					id: this.info.id,
					c_status: this.status,
					exhibitionId: this.exhibitionId,
					code: this.code || 0
				};
				uni.setStorageSync('loginToPage', msg);
				this.toLogin(); // 未登录
				return;
			}
			uni.navigateTo({
				url: '/subPages/company_home/download?id=' + this.info.id + '&c_status=' + this.status + '&title=' + this.info.product_name + '&exhibitionId=' + this.exhibitionId
			});
		},
		// 点击企业未登录先拉起登录后再跳转
		authLogin(e) {
			if (uni.getStorageSync('userInfo').hasLogin) return;
			if (e.detail.errMsg === 'getPhoneNumber:ok') {
				this.getLogin(e.detail.code)
					.then(res => {
						uni.$u.toast('授权登录成功');
						this.toCompany();
					})
					.catch(err => {
						console.log('登录失败');
					});
			} else {
				uni.showToast({
					title: '授权失败,请登录后查看',
					icon: 'none'
				});
			}
		},
		toCompany() {
			if (!uni.getStorageSync('userInfo').hasLogin) return;
			this.goPages('/subPages/company_home/index?id=' + this.info.uid);
		}
	}
};
</script>

<style lang="scss" scoped>
.swiper_box {
	width: 100%;
	// height: 448rpx;
	border: 1px solid #dcdcdc;

	image {
		width: 100%;
		height: 440rpx;
	}
}

.left_icon {
	image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 0;
	}
}

.enquiry {
	width: 140rpx;
	height: 48rpx;
	background: linear-gradient(-26deg, #cf1526, #d73342);
	box-shadow: 0px 0px 2px 0px rgba(195, 195, 195, 0.5);
}

.element {
	border-top: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;

	.ele_img {
		max-width: 341rpx;
		height: 160rpx;
		border: 1px solid #dcdcdc;
		padding: 20rpx;
	}

	.ele_cont {
		width: calc(100% - 370rpx);

		.tit_box {
			width: 100%;

			.tit {
				width: calc(100% - 100rpx);
			}

			.tag {
				width: 88rpx;
				height: 36rpx;
				background: #f2f2f2;
				font-size: 20rpx;
				line-height: 36rpx;
				text-align: center;
			}
		}

		.s_img {
			image {
				width: 60rpx;
				height: 60rpx;
				border: 1px solid #dcdcdc;
			}

			.samll_img {
				margin-right: 20rpx;
			}

			.samll_img:last-child {
				margin: 0;
			}
		}
	}
}

.recommend {
	.scroll_cont {
		white-space: nowrap;
		width: 100%;
	}

	.recommend_item {
		display: inline-block;
		width: 280rpx;
		margin-right: 20rpx;

		image {
			width: 100%;
			height: 90rpx;
			border: 1px solid #dcdcdc;
		}

		.rec_btn {
			width: 100%;
			height: 44rpx;
			background: linear-gradient(-19deg, #cf1526, #d73342);
			box-shadow: 0px 0px 2px 0px rgba(195, 195, 195, 0.5);
			line-height: 44rpx;
		}
	}
}

.ewmwarp {
	width: 80rpx;
	height: 80rpx;
	border-top-left-radius: 100rpx;
	position: fixed;
	bottom: 0;
	right: 0;
	box-shadow: -2rpx -2rpx 12rpx rgba(243, 0, 0, 0.1);
}

.ewr_img {
	width: 50rpx;
	height: 50rpx;
	// margin-top: 20rpx;
	// margin-left: 20rpx;
}

.bigewm {
	width: 300rpx;
	height: 300rpx;
}

.savebtn {
	width: 200rpx;
	height: 50rpx;
}

// 底部按钮
.bottom_btn {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 98rpx;
	background-color: $color14;
	padding: 30rpx;
	border-radius: 20rpx 20rpx 0px 0px;
	font-size: 28rpx;
	text-align: center;
	z-index: 999;

	.text {
		flex-grow: 1;
		width: calc((100% / 2) - 20rpx);
	}

	button {
		width: 100% !important;
	}

	.line {
		flex-grow: 0;
	}
}

::v-deep .u-modal {
	border-radius: 6px;
	overflow: hidden;
	background: #f2f2f2;
	// opacity: 0.99;
}
</style>
